<template>
  <div class="content">
    <div class="box">
      <div class="item1">
        <div class="middle">
          <div style="font-size: 18px; color: #00ffff; margin-left: 10px">
            库存预警
          </div>
          <div class="list">
            <div class="header">
              <div class="headerItem">物料名称</div>
              <div class="headerItem">台数</div>
            </div>
            <div class="listItem">
              <div
                class="itemBox"
                v-for="(item, index) in alertList"
                :key="index"
                :class="index % 2 != 0 ? 'itemBoxBg' : ''"
              >
                <div class="boxLeft">{{ item.skuName }}</div>
                <div class="boxLeft" style="color: #ff5134">
                  {{ item.number + item.unit }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="middle mm">
          <div style="font-size: 18px; color: #00ffff; margin-left: 10px">
            未到货预警
          </div>
          <div class="list">
            <div class="header">
              <div class="headerItem">物料名称</div>
              <div class="headerItem">台数</div>
            </div>
            <div class="listItem">
              <div
                class="itemBox"
                v-for="(item, index) in alertList"
                :key="index"
                :class="index % 2 != 0 ? 'itemBoxBg' : ''"
              >
                <div class="boxLeft">{{ item.skuName }}</div>
                <div class="boxLeft" style="color: #ff5134">
                  {{ item.number + item.unit }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="middle mm">
          <div style="font-size: 18px; color: #00ffff; margin-left: 10px">
            月度成品入库数量
          </div>
          <div class="monthDay">
            <div class="monthBg"></div>
            <monthKG :key="KG"></monthKG>
          </div>
        </div>
      </div>
      <div class="item2">
        <div class="itemUp">
          <div class="img">
            <img
              src="../../assets/img/monitor/bigModel.png"
              alt=""
              style="width: 500px; height: auto"
            />
          </div>
        </div>
        <div class="itemDown">
          <div
            style="
              font-size: 18px;
              color: #00ffff;
              margin-left: 10px;
              padding-top: 10px;
            "
          >
            月度项目完成度
          </div>
          <div class="progressBox">
            <div class="progressItem">
              <div class="proLeft">芜湖金牛科技有限公司:</div>
              <div class="proRight">
                <el-progress
                  :text-inside="true"
                  :stroke-width="24"
                  :percentage="70"
                />
              </div>
            </div>
            <div class="progressItem">
              <div class="proLeft">金牛科技:</div>
              <div class="proRight">
                <el-progress
                  :text-inside="true"
                  :stroke-width="24"
                  :percentage="60"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item1">
        <div class="middle">
          <div style="font-size: 18px; color: #00ffff; margin-left: 10px">
            当日入库记录
          </div>
          <div class="list">
            <div class="header">
              <div class="headerItem">物料名称</div>
              <div class="headerItem">台数</div>
            </div>
            <div class="listItem">
              <div
                class="itemBox"
                v-for="(item, index) in alertList"
                :key="index"
                :class="index % 2 != 0 ? 'itemBoxBg' : ''"
              >
                <div class="boxLeft">{{ item.skuName }}</div>
                <div class="boxLeft" style="color: #ff5134">
                  {{ item.number + item.unit }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="middle mm">
          <div style="font-size: 18px; color: #00ffff; margin-left: 10px">
            当日入库记录
          </div>
          <div class="list">
            <div class="header">
              <div class="headerItem">物料名称</div>
              <div class="headerItem">台数</div>
            </div>
            <div class="listItem">
              <div
                class="itemBox"
                v-for="(item, index) in alertList"
                :key="index"
                :class="index % 2 != 0 ? 'itemBoxBg' : ''"
              >
                <div class="boxLeft">{{ item.skuName }}</div>
                <div class="boxLeft" style="color: #ff5134">
                  {{ item.number + item.unit }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="middle mm">
          <div style="font-size: 18px; color: #00ffff; margin-left: 10px">
            开关柜年度销量
          </div>
          <div class="monthDay">
            <div class="monthBg"></div>
            <monthBY :key="BY"></monthBY>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import monthKG from "@/components/overall/monthKG.vue";
import monthBY from "@/components/overall/monthBY.vue";
import { ref, onMounted } from "vue";
import goodsApi from "@/api/inwarehouse/goods-api";

const KG = ref(false);
const BY = ref(false);
const alertList = ref([]);

const getGoodsAlart = async () => {
  const res = await goodsApi.list({ otherFilter: { alert: true } });
  alertList.value = res.data.records;
  console.log("getGoodsAlart", alertList.value);
};

onMounted(async () => {
  await getGoodsAlart();
  KG.value = !KG.value;
});
</script>

<style lang="scss" scoped>
.content {
  width: 100vw;
  height: 90vh;
  box-sizing: border-box;
  .box {
    width: 100%;
    height: 85vh;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    .item1 {
      width: 29vw;
      height: 100%;
      box-sizing: border-box;
      .middle {
        box-sizing: border-box;
        padding-top: 10px;
        width: 29vw;
        height: 254px;
        background: url("../../assets/img/layout/itemBg.png") no-repeat center;
        background-size: cover;
        .list {
          width: 95%;
          height: auto;
          margin: 20px auto 0 auto;
          .header {
            width: 100%;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #073a3d;
            border-radius: 4px;
            .headerItem {
              width: 50%;
              height: 100%;
              text-align: center;
              line-height: 20px;
              color: #fff;
              font-size: 12px;
            }
          }
          .listItem {
            width: 100%;
            height: 160px;
            overflow-y: scroll;
            .itemBox {
              width: 100%;
              height: 20px;
              color: #fff;
              display: flex;
              align-items: center;
              justify-content: center;
              .boxLeft {
                width: 50%;
                height: 20px;
                line-height: 20px;
                text-align: center;
                font-size: 12px;
              }
            }
            .itemBoxBg {
              background-color: #073a3d;
            }
          }
        }
        .monthDay {
          width: 480px;
          height: 240px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          .monthBg {
            width: 82%;
            height: 51%;
            background: url("../../assets/img/list/Cwang.png") no-repeat center;
            background-size: cover;
            position: absolute;
            left: 38px;
            bottom: 68px;
          }
        }
      }
      .mm {
        margin-top: 20px;
      }
    }
    .item2 {
      width: 40vw;
      height: 100%;
      // background-color: antiquewhite;
      .itemUp {
        width: 100%;
        height: 527px;
        background: url("../../assets/img/list/ct.png") no-repeat center;
        background-size: contain;
        position: relative;
        .img {
          position: absolute;
          left: 12%;
          bottom: 20%;
          // margin: 0 auto;
        }
      }
      .itemDown {
        margin: 20px auto 0 auto;
        width: 96%;
        height: 254px;
        background: url("../../assets/img/layout/itemBg.png") no-repeat center;
        background-size: cover;
        .progressBox {
          width: 100%;
          height: 190px;
          margin-top: 30px;
          overflow-y: scroll;
          padding: 10px 20px;
          .progressItem {
            width: 100%;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 5px;
            .proLeft {
              width: auto;
              height: 100%;
              line-height: 24px;
              text-align: center;
              color: #fff;
              margin-right: 3px;
            }
            .proRight {
              width: 60%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}
</style>
